<template>
  <div class="statistics-management">
    <!-- 数据概览 -->
    <el-row :gutter="20" class="overview-row" v-loading="loading.overview">
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-number">{{ overviewData.totalOrders }}</div>
              <div class="overview-label">总订单数</div>
              <div class="overview-trend">
                <span :class="overviewData.orderTrend >= 0 ? 'trend-up' : 'trend-down'">
                  {{ overviewData.orderTrend >= 0 ? '↗' : '↘' }} {{ Math.abs(overviewData.orderTrend) }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon revenue">
              <el-icon><Money /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-number">¥{{ formatMoney(overviewData.totalRevenue) }}</div>
              <div class="overview-label">总收入</div>
              <div class="overview-trend">
                <span :class="overviewData.revenueTrend >= 0 ? 'trend-up' : 'trend-down'">
                  {{ overviewData.revenueTrend >= 0 ? '↗' : '↘' }} {{ Math.abs(overviewData.revenueTrend) }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon customers">
              <el-icon><User /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-number">{{ overviewData.totalCustomers }}</div>
              <div class="overview-label">服务客户</div>
              <div class="overview-trend">
                <span :class="overviewData.customerTrend >= 0 ? 'trend-up' : 'trend-down'">
                  {{ overviewData.customerTrend >= 0 ? '↗' : '↘' }} {{ Math.abs(overviewData.customerTrend) }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon satisfaction">
              <el-icon><Star /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-number">{{ overviewData.satisfaction }}%</div>
              <div class="overview-label">客户满意度</div>
              <div class="overview-trend">
                <span :class="overviewData.satisfactionTrend >= 0 ? 'trend-up' : 'trend-down'">
                  {{ overviewData.satisfactionTrend >= 0 ? '↗' : '↘' }} {{ Math.abs(overviewData.satisfactionTrend) }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 服务类型统计 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover" class="service-stats-card" v-loading="loading.services">
          <template #header>
            <div class="card-header">
              <span>服务类型统计</span>
              <el-select v-model="serviceTimeRange" size="small" style="width: 120px;">
                <el-option label="本周" value="week" />
                <el-option label="本月" value="month" />
                <el-option label="本季度" value="quarter" />
              </el-select>
            </div>
          </template>
          <div class="service-list">
            <div v-for="service in serviceStats" :key="service.type" class="service-item">
              <div class="service-info">
                <div class="service-icon" :class="service.type">
                  <el-icon v-if="service.type === 'clothes'"><Shirt /></el-icon>
                  <el-icon v-else-if="service.type === 'shoes'"><Shoe /></el-icon>
                  <el-icon v-else-if="service.type === 'pets'"><Pet /></el-icon>
                  <el-icon v-else-if="service.type === 'bags'"><Bag /></el-icon>
                  <el-icon v-else-if="service.type === 'bedding'"><Bed /></el-icon>
                  <el-icon v-else-if="service.type === 'car'"><Car /></el-icon>
                  <el-icon v-else-if="service.type === 'home'"><House /></el-icon>
                  <el-icon v-else><Tools /></el-icon>
                </div>
                <div class="service-details">
                  <div class="service-name">{{ service.name }}</div>
                  <div class="service-count">{{ service.orders }}单</div>
                </div>
              </div>
              <div class="service-revenue">
                <div class="revenue-amount">¥{{ formatMoney(service.revenue) }}</div>
                <div class="revenue-percentage">{{ service.percentage }}%</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="time-stats-card" v-loading="loading.time">
          <template #header>
            <div class="card-header">
              <span>时间段分析</span>
              <el-radio-group v-model="timeAnalysisType" size="small">
                <el-radio-button label="orders">订单量</el-radio-button>
                <el-radio-button label="revenue">收入</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="time-analysis">
            <div v-for="period in timeStats" :key="period.time" class="time-item">
              <div class="time-label">{{ period.time }}</div>
              <div class="time-bar">
                <div 
                  class="time-progress" 
                  :style="{ width: period.percentage + '%' }"
                ></div>
              </div>
              <div class="time-value">
                {{ timeAnalysisType === 'orders' ? period.orders + '单' : '¥' + formatMoney(period.revenue) }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 地区分析 -->
    <el-card shadow="hover" class="region-stats-card" style="margin-top: 20px;" v-loading="loading.regions">
      <template #header>
        <div class="card-header">
          <span>服务地区分析</span>
          <div class="header-actions">
            <el-select v-model="regionTimeRange" size="small" style="width: 120px; margin-right: 10px;">
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
              <el-option label="本季度" value="quarter" />
            </el-select>
            <el-button type="primary" size="small" @click="exportData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 地区统计卡片 -->
      <div class="region-grid">
        <div v-for="region in regionStats" :key="region.region" class="region-card">
          <div class="region-header">
            <div class="region-name">{{ region.region }}</div>
            <div class="region-rank">#{{ region.rank }}</div>
          </div>

          <div class="region-stats">
            <div class="stat-row">
              <div class="stat-item">
                <div class="stat-label">订单数量</div>
                <div class="stat-value orders">{{ region.orders }}单</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">收入金额</div>
                <div class="stat-value revenue">¥{{ formatMoney(region.revenue) }}</div>
              </div>
            </div>

            <div class="stat-row">
              <div class="stat-item">
                <div class="stat-label">平均客单价</div>
                <div class="stat-value">¥{{ formatMoney(region.avgOrderValue) }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">增长率</div>
                <div class="stat-value" :class="region.growth >= 0 ? 'growth-positive' : 'growth-negative'">
                  {{ region.growth >= 0 ? '+' : '' }}{{ region.growth }}%
                </div>
              </div>
            </div>
          </div>

          <div class="region-satisfaction">
            <div class="satisfaction-label">客户满意度</div>
            <div class="satisfaction-score">
              <el-rate
                v-model="region.satisfaction"
                disabled
                size="small"
                show-score
                text-color="#ff9900"
                score-template="{value}分"
              />
            </div>
          </div>

          <div class="region-actions">
            <el-button size="small" type="primary" @click="viewRegionDetail(region)">
              查看详情
            </el-button>
            <el-button size="small" @click="optimizeRegion(region)">
              优化建议
            </el-button>
          </div>
        </div>
      </div>

      <!-- 地区对比表格 -->
      <div class="region-table-section" style="margin-top: 30px;">
        <div class="section-header">
          <h3>地区对比表</h3>
          <el-button size="small" @click="toggleTableView">
            {{ showDetailTable ? '隐藏详情' : '显示详情' }}
          </el-button>
        </div>

        <el-table
          v-if="showDetailTable"
          :data="regionStats"
          style="width: 100%"
          :row-class-name="getRowClassName"
        >
          <el-table-column prop="rank" label="排名" width="80" align="center">
            <template #default="scope">
              <el-tag :type="getRankType(scope.row.rank)" size="small">
                #{{ scope.row.rank }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="region" label="服务区域" min-width="180">
            <template #default="scope">
              <div class="region-cell">
                <div class="region-name-cell">{{ scope.row.region }}</div>
                <div class="region-desc">{{ scope.row.description }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orders" label="订单数量" width="120" align="center">
            <template #default="scope">
              <div class="orders-cell">
                <div class="orders-count">{{ scope.row.orders }}单</div>
                <div class="orders-trend" :class="scope.row.orderTrend >= 0 ? 'trend-up' : 'trend-down'">
                  {{ scope.row.orderTrend >= 0 ? '↗' : '↘' }} {{ Math.abs(scope.row.orderTrend) }}%
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="revenue" label="收入金额" width="140" align="center">
            <template #default="scope">
              <div class="revenue-cell">
                <div class="revenue-amount">¥{{ formatMoney(scope.row.revenue) }}</div>
                <div class="revenue-trend" :class="scope.row.revenueTrend >= 0 ? 'trend-up' : 'trend-down'">
                  {{ scope.row.revenueTrend >= 0 ? '↗' : '↘' }} {{ Math.abs(scope.row.revenueTrend) }}%
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="avgOrderValue" label="平均客单价" width="120" align="center">
            <template #default="scope">
              <span class="avg-order-value">¥{{ formatMoney(scope.row.avgOrderValue) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="satisfaction" label="满意度" width="140" align="center">
            <template #default="scope">
              <div class="satisfaction-cell">
                <el-rate
                  v-model="scope.row.satisfaction"
                  disabled
                  size="small"
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="growth" label="增长率" width="100" align="center">
            <template #default="scope">
              <el-tag
                :type="scope.row.growth >= 0 ? 'success' : 'danger'"
                size="small"
              >
                {{ scope.row.growth >= 0 ? '+' : '' }}{{ scope.row.growth }}%
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template #default="scope">
              <el-button-group>
                <el-button size="small" @click="viewRegionDetail(scope.row)">
                  详情
                </el-button>
                <el-button size="small" type="warning" @click="optimizeRegion(scope.row)">
                  优化
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Document,
  Money,
  User,
  Star,
  Download
} from '@element-plus/icons-vue'
import {
  getStatisticsOverview,
  getServiceTypeAnalysis,
  getTimeAnalysis,
  getRegionStatistics,
  exportStatisticsData,
  formatMoney,
  formatPercentage,
  formatTrend,
  TIME_RANGES
} from '@/api/statistics'

// 响应式数据
const serviceTimeRange = ref('month')
const timeAnalysisType = ref('orders')
const regionTimeRange = ref('month')
const showDetailTable = ref(false)

// 加载状态
const loading = reactive({
  overview: false,
  services: false,
  time: false,
  regions: false
})

// 数据概览
const overviewData = reactive({
  totalOrders: 0,
  orderTrend: 0,
  totalRevenue: 0,
  revenueTrend: 0,
  totalCustomers: 0,
  customerTrend: 0,
  satisfaction: 0,
  satisfactionTrend: 0
})

// 服务类型统计
const serviceStats = ref([])

// 时间段统计
const timeStats = ref([])

// 地区统计
const regionStats = ref([])

// API调用方法
const loadOverviewData = async () => {
  loading.overview = true
  try {
    const response = await getStatisticsOverview({ timeRange: 'month' })
    if (response.code === 200) {
      Object.assign(overviewData, response.data)
      console.log('✅ 统计概览数据加载成功')
    } else {
      throw new Error(response.message || '获取概览数据失败')
    }
  } catch (error) {
    console.error('❌ 获取统计概览数据失败:', error)
    ElMessage.error(error.message || '获取概览数据失败')
  } finally {
    loading.overview = false
  }
}

const loadServiceStats = async () => {
  loading.services = true
  try {
    const response = await getServiceTypeAnalysis({ timeRange: serviceTimeRange.value })
    if (response.code === 200) {
      // 确保数据结构正确
      const data = response.data || []
      serviceStats.value = Array.isArray(data) ? data.map(item => ({
        type: item.type || '',
        name: item.name || '',
        orders: item.orders || 0,
        revenue: item.revenue || 0,
        percentage: item.percentage || 0
      })) : []
      console.log('✅ 服务统计数据加载成功', serviceStats.value)
    } else {
      throw new Error(response.message || '获取服务统计失败')
    }
  } catch (error) {
    console.error('❌ 获取服务统计数据失败:', error)
    ElMessage.error(error.message || '获取服务统计失败')
    // 设置默认数据避免undefined
    serviceStats.value = [
      { type: 'clothes', name: '衣物洗护', orders: 0, revenue: 0, percentage: 0 },
      { type: 'shoes', name: '鞋类清洗', orders: 0, revenue: 0, percentage: 0 },
      { type: 'pets', name: '宠物清洗', orders: 0, revenue: 0, percentage: 0 },
      { type: 'bags', name: '包包清洗', orders: 0, revenue: 0, percentage: 0 },
      { type: 'bedding', name: '被子清洗', orders: 0, revenue: 0, percentage: 0 },
      { type: 'car', name: '洗车服务', orders: 0, revenue: 0, percentage: 0 }
    ]
  } finally {
    loading.services = false
  }
}

const loadTimeStats = async () => {
  loading.time = true
  try {
    const response = await getTimeAnalysis({
      timeRange: 'month',
      metric: timeAnalysisType.value
    })
    if (response.code === 200) {
      // 确保数据结构正确
      const data = response.data || []
      timeStats.value = Array.isArray(data) ? data.map(item => ({
        time: item.time || '',
        orders: item.orders || 0,
        revenue: item.revenue || 0,
        percentage: item.percentage || 0
      })) : []
      console.log('✅ 时间统计数据加载成功', timeStats.value)
    } else {
      throw new Error(response.message || '获取时间统计失败')
    }
  } catch (error) {
    console.error('❌ 获取时间统计数据失败:', error)
    ElMessage.error(error.message || '获取时间统计失败')
    // 设置默认数据避免undefined
    timeStats.value = [
      { time: '00-06', orders: 0, revenue: 0, percentage: 0 },
      { time: '06-12', orders: 0, revenue: 0, percentage: 0 },
      { time: '12-18', orders: 0, revenue: 0, percentage: 0 },
      { time: '18-24', orders: 0, revenue: 0, percentage: 0 }
    ]
  } finally {
    loading.time = false
  }
}

const loadRegionStats = async () => {
  loading.regions = true
  try {
    const response = await getRegionStatistics({ timeRange: regionTimeRange.value })
    if (response.code === 200) {
      // 确保数据结构正确，每个地区都有必要的属性
      const regions = Array.isArray(response.data) ? response.data : []
      regionStats.value = regions.map(region => ({
        rank: region.rank || 0,
        region: region.region || '',
        description: region.description || '',
        orders: region.orders || 0,
        orderTrend: region.orderTrend || 0,
        revenue: region.revenue || 0,
        revenueTrend: region.revenueTrend || 0,
        avgOrderValue: region.avgOrderValue || 0,
        satisfaction: Number(region.satisfaction) || 0, // 确保是数字类型
        growth: region.growth || 0
      }))
      console.log('✅ 地区统计数据加载成功')
    } else {
      throw new Error(response.message || '获取地区统计失败')
    }
  } catch (error) {
    console.error('❌ 获取地区统计数据失败:', error)
    ElMessage.error(error.message || '获取地区统计失败')
    // 设置空数组避免渲染错误
    regionStats.value = []
  } finally {
    loading.regions = false
  }
}

// 方法
const exportData = async () => {
  try {
    const response = await exportStatisticsData({
      type: 'overview',
      timeRange: regionTimeRange.value,
      format: 'excel'
    })

    // 创建下载链接
    const blob = new Blob([response], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `统计数据_${new Date().getTime()}.xlsx`
    link.click()
    window.URL.revokeObjectURL(url)

    ElMessage.success('数据导出成功')
  } catch (error) {
    console.error('导出数据失败:', error)
    ElMessage.error('导出数据失败')
  }
}

const viewRegionDetail = (region) => {
  ElMessage.info(`查看${region.region}详细数据`)
}

const optimizeRegion = (region) => {
  ElMessage.info(`为${region.region}生成优化建议`)
}

const toggleTableView = () => {
  showDetailTable.value = !showDetailTable.value
}

const getRankType = (rank) => {
  if (rank === 1) return 'danger'
  if (rank <= 3) return 'warning'
  return 'info'
}

const getRowClassName = ({ row }) => {
  if (row.rank === 1) return 'top-region'
  if (row.rank <= 3) return 'good-region'
  if (row.growth < 0) return 'poor-region'
  return ''
}

// 监听时间范围变化
watch(serviceTimeRange, () => {
  loadServiceStats()
})

watch(timeAnalysisType, () => {
  loadTimeStats()
})

watch(regionTimeRange, () => {
  loadRegionStats()
})

// 页面初始化
onMounted(async () => {
  console.log('📊 数据统计页面初始化')

  try {
    // 并行加载所有统计数据
    await Promise.all([
      loadOverviewData(),
      loadServiceStats(),
      loadTimeStats(),
      loadRegionStats()
    ])

    console.log('✅ 统计分析数据加载完成')
  } catch (error) {
    console.error('❌ 统计分析数据加载失败:', error)
    ElMessage.error('页面数据加载失败，请刷新重试')
  }
})
</script>

<style scoped>
.statistics-management {
  padding: 20px;
}

.overview-row {
  margin-bottom: 20px;
}

.overview-card {
  border-radius: 8px;
  overflow: hidden;
}

.overview-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.overview-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: white;
}

.overview-icon.orders {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.overview-icon.revenue {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.overview-icon.customers {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.overview-icon.satisfaction {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.overview-info {
  flex: 1;
}

.overview-number {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 5px;
}

.overview-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 3px;
}

.overview-trend {
  font-size: 12px;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-list {
  max-height: 400px;
  overflow-y: auto;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.service-item:last-child {
  border-bottom: none;
}

.service-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.service-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 16px;
  color: white;
}

.service-icon.clothes {
  background: #3b82f6;
}

.service-icon.shoes {
  background: #8b5cf6;
}

.service-icon.pets {
  background: #f59e0b;
}

.service-icon.bags {
  background: #ef4444;
}

.service-icon.bedding {
  background: #10b981;
}

.service-icon.car {
  background: #6b7280;
}

.service-icon.home {
  background: #f97316;
}

.service-icon.plumbing {
  background: #84cc16;
}

.service-details {
  flex: 1;
}

.service-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 2px;
}

.service-count {
  font-size: 12px;
  color: #6b7280;
}

.service-revenue {
  text-align: right;
}

.revenue-amount {
  font-size: 14px;
  font-weight: bold;
  color: #059669;
  margin-bottom: 2px;
}

.revenue-percentage {
  font-size: 12px;
  color: #6b7280;
}

.time-analysis {
  padding: 10px 0;
}

.time-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.time-label {
  width: 100px;
  font-size: 12px;
  color: #6b7280;
}

.time-bar {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  margin: 0 15px;
  overflow: hidden;
}

.time-progress {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.time-value {
  width: 80px;
  text-align: right;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.orders-count {
  color: #3b82f6;
  font-weight: 500;
}

.revenue-amount {
  color: #059669;
  font-weight: 500;
}

.growth-positive {
  color: #10b981;
  font-weight: 500;
}

.growth-negative {
  color: #ef4444;
  font-weight: 500;
}

/* 地区分析样式 */
.region-stats-card {
  border-radius: 12px;
  border: none;
}

.header-actions {
  display: flex;
  align-items: center;
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.region-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  background: white;
  transition: all 0.3s ease;
}

.region-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.region-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.region-rank {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.region-stats {
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.stat-value.orders {
  color: #3b82f6;
}

.stat-value.revenue {
  color: #059669;
}

.region-satisfaction {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.satisfaction-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.satisfaction-score {
  display: flex;
  align-items: center;
  justify-content: center;
}

.region-actions {
  display: flex;
  gap: 8px;
}

.region-actions .el-button {
  flex: 1;
}

/* 表格部分样式 */
.region-table-section {
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1f2937;
}

.region-cell {
  padding: 4px 0;
}

.region-name-cell {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 2px;
}

.region-desc {
  font-size: 12px;
  color: #6b7280;
}

.orders-cell,
.revenue-cell {
  text-align: center;
}

.orders-count,
.revenue-amount {
  font-weight: 600;
  margin-bottom: 2px;
}

.orders-trend,
.revenue-trend {
  font-size: 11px;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.avg-order-value {
  font-weight: 500;
  color: #374151;
}

.satisfaction-cell {
  display: flex;
  justify-content: center;
}

/* 表格行样式 */
:deep(.top-region) {
  background: linear-gradient(90deg, #fef3c7, #fef9e7);
}

:deep(.good-region) {
  background: linear-gradient(90deg, #ecfdf5, #f0fdf4);
}

:deep(.poor-region) {
  background: linear-gradient(90deg, #fef2f2, #fef7f7);
}

:deep(.el-card__header) {
  background: #fafbfc;
  border-bottom: 1px solid #e5e7eb;
}

:deep(.el-table) {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .region-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    flex-direction: column;
    gap: 8px;
  }

  .region-actions {
    flex-direction: column;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
